<template>
	<div class="personnelList agent-box">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>代理商管理</el-breadcrumb-item>
			<el-breadcrumb-item>代理商</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="tableMaxBox">
				<div class="py_5 px_10">
					<el-row>
						<el-col :span="2">
							<el-button
								v-if="manageInfo.user_info.type == 1"
								type="success"
								class="fl"
								@click="addagentBtn()"
								round
								size="mini"
								>新增</el-button
							>
						</el-col>
						<el-col :span="22">
							<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
								<el-form-item class="w_160">
									<el-input v-model="query.name" placeholder="代理商"></el-input>
								</el-form-item>

								<el-form-item>
									<el-select size="mini" class="w_100" v-model="query.level" placeholder="类型" clearable>
										<el-option label="一级" value="1"></el-option>
										<el-option label="二级" value="2"></el-option>
									</el-select>
								</el-form-item>

								<el-form-item class="w_120">
									<el-select v-model="query.city_id" placeholder="城市">
										<el-option
											v-for="item in cityList"
											:key="item.id"
											:label="item.city_name"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select size="mini" class="w_100" v-model="query.status" placeholder="状态" clearable>
										<el-option label="正常" value="1"></el-option>
										<el-option label="停用" value="2"></el-option>
									</el-select>
								</el-form-item>

								<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
									>搜索</el-button
								>
								<el-button size="mini" round @click="resetBtn">重置</el-button>
							</el-form>
						</el-col>
					</el-row>
				</div>
				<template>
					<el-table :data="list" stripe>
						<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
						<el-table-column prop="name" label="代理商名称" width="120"></el-table-column>
						<el-table-column prop="level" label="类型" width="60" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.level == 1">一级</span>
								<span v-else-if="row.level == 2">二级</span>
							</template>
						</el-table-column>
						<el-table-column prop="parent_name" label="上级代理" width="120" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.parent_name">{{ row.parent_name }}</span>
								<span v-else>/</span>
							</template>
						</el-table-column>
						<el-table-column prop="cityName" label="代理城市" width="120"> </el-table-column>
						<!-- <el-table-column prop="areaName" label="管辖商圈" min-width="150"></el-table-column> -->
						<el-table-column prop="principal" label="负责人" width="120"></el-table-column>
						<el-table-column prop="mobile" label="手机号" width="120px"></el-table-column>
						<el-table-column prop="status" label="状态" width="110">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == 1">正常</span>
								<span class="text-danger" v-if="row.status == 2">停用</span>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注"></el-table-column>
						<el-table-column label="操作" width="100px" fixed="right">
							<template slot-scope="{ row }">
								<el-link type="info" class="InfoFont" :underline="false" @click="addagentBtn(row)">编辑</el-link>
								<el-link type="danger" class="InfoFont" :underline="false" v-if="row.status == 1" @click="onOff(row)"
									>停用</el-link
								>
								<el-link type="success" class="" :underline="false" v-if="row.status == 2" @click="onOff(row)"
									>启用</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import qs from 'qs'
var common = require('../../../static/tool.js')
import { fetchCityList } from '@/api/city.js'
import { fetchAgentList, agentDisable } from '@/api/agent.js'
export default {
	name: 'agent-box',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,

			query: {
				sn: '',
				name: '',
				city_id: '',
				status: '',
				level: ''
			},

			cityList: [], //城市列表
			list: [], //代理商列表

			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {},
	mounted() {
		this.getcityList()
		this.getList()
	},
	methods: {
		async getList() {
			try {
				let ret = await fetchAgentList({
					...this.query,
					page: this.pageNum,
					limit: this.pageSizeNow
				})
				ret.list.forEach(item => {
					item.cityName = item.city_name.join(',')
					item.areaName = item.area_name.join(',')
				})
				console.log(ret)
				this.list = ret.list
				this.total = ret.count
			} catch (err) {
				console.log('err:', err)
			}
		},

		async onOff(row) {
			console.log(row)
			try {
				let ret = await this.$confirm(
					`${+row.status === 1 ? '停用代理商后，代理商下用户将无法登录系统！' : '确定要启用代理商吗？'}`,
					'温馨提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				)
				if (ret === 'cancel') return
				// return
				await agentDisable({
					sn: row.sn,
					status: +row.status === 1 ? 2 : 1
				})
				this.$message.success('操作成功')
				this.getList()
			} catch (err) {
				console.log(err)
			}
		},
		addagentBtn(row) {
			if (row) {
				this.$router.push({
					path: '/agentadd',
					query: {
						sn: row.sn
					}
				})
			} else {
				this.$router.push('/agentadd')
			}
		},

		// 获取城市列表
		async getcityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
			} catch (err) {
				console.log('err:', err)
			}
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.getList()
		},
		//重置
		async resetBtn() {
			this.resetData()
			this.getList()
		},
		//重置请求数据
		resetData() {
			this.pageNum = 1
			for (let key in this.query) {
				this.query[key] = ''
			}
		},

		shearchBtn() {
			console.log(this.query)
			// 搜索
			this.pageNum = 1
			this.getList()
		}
	},
	filters: {}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/agent/List.vue